<template>
  <div style="padding: 5px;">
<!--    <h1>数据标准管理</h1>-->
      <!-- 查询表单 -->
      <div style="padding: 20px;">
        <a-form :form="searchForm" layout="inline">
          <!-- 查询表单项 -->
          <a-form-item label="指标名称">
            <a-input v-model="searchParams.evalName" />
          </a-form-item>
          <a-form-item>
            <a-button type="primary" @click="search">查询</a-button>
            <a-button type="primary" ghost @click="reset" style="margin-left: 10px;">重置</a-button>
          </a-form-item>
        </a-form>
      </div>
      <div style="text-align: right; margin: 10px;">
        <a-button type="primary" @click="showModal('add')">新增</a-button>&nbsp;&nbsp;
      </div>
      <!-- 列表展示 -->
      <a-table :columns="columns" :dataSource="dataSource" :loading="loading" :key="tableKey" :pagination="false">
        <template slot="action" slot-scope="text, record">
          <a-button @click="edit(record)">编辑</a-button>
          &nbsp;&nbsp;
          <a-popconfirm
            title="是否确认删除此条数据?"
            ok-text="是"
            cancel-text="否"
            @confirm="remove(record)"
          >
            <a-button type="danger">删除</a-button>
          </a-popconfirm>
          &nbsp;&nbsp;
        </template>
      </a-table>
      <br />
      <!-- 分页器 -->
      <a-pagination :show-total="total => `共${total}条`" :total="total" :current="pagination.current"
                    :pageSize="pagination.pageSize" @change="handlePaginationChange" />
    <!-- 新增/编辑对话框 -->
    <a-modal v-model="modal.visible" :title="modal.title" @ok="handleOk" @cancel="handleCancel" width="800px">
      <!-- 表单项 -->
      <a-form :form="modalForm" :label-col="{ span: 8 }" :wrapper-col="{ span: 12 }">
        <!-- 表单项 -->
        <a-form-item label="指标名称" :required="true" :rules="[ { required: true, message: '请输入指标名称' } ]">
          <a-input v-model="modal.formData.evalName" />
        </a-form-item>
        <a-form-item label="描述">
          <a-input v-model="modal.formData.evalDesc" />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script>
import { postAction } from '@api/esManage'

export default {
  components: {
  },
  data() {
    return {
      searchForm: null,
      searchParams: {
        talentRealName: '',
        talentAllPhoneNumber: ''
      },
      tableKey: '',
      dataSource: [],
      // 选中的行
      selectedRows: [],
      selectedRowKeys: [],
      columns: [
        {
          title: '序号',
          dataIndex: 'key',
          key: 'key',
          align: 'center',
          width: 80,
          customRender: (text, record, index) => `${index + 1}`//此处为重点
        },
        {
          title: '指标名称',
          dataIndex: 'evalName',
        },

        {
          title: '描述',
          dataIndex: 'evalDesc',
          ellipsis: true,
        },
        {
          title: '操作',
          dataIndex: 'action',
          scopedSlots: { customRender: 'action' }
        }
      ],
      imageUrl: '',
      loading: false,
      total: 0,
      pagination: {
        current: 1,
        pageSize: 10
      },
      modalForm: null,
      modal: {
        visible: false,
        title: '',
        record: null,
        formData: {}
      },
      tableId: "",
      showFruitModal: false
    }
  },
  methods: {
    search() {
      this.pagination.current = 1
      this.selectedRows = []
      this.selectedRowKeys = []
      this.fetchData()
    },

    reset() {
      this.searchParams = {}
      this.pagination = {
        current: 1,
        pageSize: 10
      }
      this.fetchData()
    },
    fetchData() {
      this.dataSource = []
      this.loading = true
      let url = '/evaIndex/manage/pageList'
      let that = this
      let obj = {
        ...this.searchParams,
        pageNo: this.pagination.current,
        pageSize: this.pagination.pageSize
      }
      this.tableKey = Math.random()
      postAction(url, obj).then(res => {
        if (res.data.success) {
          that.dataSource = res.data.result.records
          that.total = parseInt(res.data.result.total)
          this.loading = false
        }
      }).catch(err => {
        console.log(err)
        this.loading = false
      })
    },
    handlePaginationChange(page, pageSize) {
      this.pagination.current = page
      this.pagination.pageSize = pageSize
      this.fetchData()
    },
    edit(record) {
      this.imageUrl = ''
      this.imageUrl = record.talentPhoto
      this.showModal('edit', JSON.parse(JSON.stringify(record)))
    },
    showModal(type, record) {
      this.modal.type = type
      this.modal.title = type === 'add' ? '新增' : ''
      if (type != 'add') {
        this.modal.formData = record
      } else {
        this.modal.formData = {}
      }
      this.modal.visible = true
    },
    async handleOk() {
      if (!this.modal.formData.evalName) {
        this.$message.error('请输入指标名称！')
        return
      }
      let url = '/evaIndex/manage/saveOrUpdate'
      let that = this

      postAction(url, this.modal.formData).then(res => {
        if (res.data.success) {
          that.$message.success('操作成功')
          this.modal.visible = false
          this.fetchData()
        }
      }).catch(err => {
        console.log(err)
      })
    },
    handleCancel() {
      this.modal.visible = false
    },
    remove(record) {
      try {
        let url = '/evaIndex/manage/delete'
        let that = this
        postAction(url, record).then(res => {
          if (res.data.success) {
            that.$message.success('操作成功')
            this.modal.visible = false
            this.fetchData()
          }
        }).catch(err => {
          console.log(err)
        })
      } catch (error) {
        console.error('Error deleting record:', error)
      }
    },
    lookFruit(record) {
      this.showFruitModal = true
      this.tableId = record.id
    },
    onClose() {
      this.showFruitModal = false
    },
  },
  created() {
    this.fetchData()
  }
}
</script>

